// 主题名称
$--skin-type: 'green';

// 主题色
$--skin-primary-color: #3CB599;
// 次要主题色
$--skin-sub-primary-color: #52D2B4;

// 皮肤基础配置
$--skin-basic-configs: (
  // 主题名称
  'skin-type': $--skin-type,

  // 主题色
  'primary-color': $--skin-primary-color,
  // 次要主题色
  'sub-primary-color': $--skin-sub-primary-color,
  // #50bca3
  'primary-light-1': get-opacity-color($--skin-primary-color, 1),
  // #63c4ad
  'primary-light-2': get-opacity-color($--skin-primary-color, 2),
  // #77cbb8
  'primary-light-3': get-opacity-color($--skin-primary-color, 3),
  // #8ad3c2
  'primary-light-4': get-opacity-color($--skin-primary-color, 4),
  // #9edacc
  'primary-light-5': get-opacity-color($--skin-primary-color, 5),
  // #b1e1d6
  'primary-light-6': get-opacity-color($--skin-primary-color, 6),
  // #c5e9e0
  'primary-light-7': get-opacity-color($--skin-primary-color, 7),
  // #d8f0eb
  'primary-light-8': get-opacity-color($--skin-primary-color, 8),
  // #ecf8f5
  'primary-light-9': get-opacity-color($--skin-primary-color, 9),

  // ---------- 背景色 ---------- //
  // 主要背景色（以侧边栏主体背景色定义）
  'main-bg-color': #398775,
  // 次要背景色（以侧边栏头部背景色定义）
  'sub-bg-color': #3CB599,
  // 面板背景色
  'panel-bg-color': #2b7866,
  // 禁用背景色
  'disabled-bg-color': #e9ecee,

  // ---------- 字体色 ---------- //
  // 正文字体色
  'main-text-color': #ffffff,
  // 正文高亮字体色
  'main-highlight-text-color': #FFCF63,
  // 描述字体色
  'describe-text-color': rgba($--color-white, 0.6),
  // 禁用字体色
  'disabled-text-color': #9e9e9e,
  // 面板字体色
  'panel-text-color': $--color-white,
  // 面板高亮字体色
  'panel-highlight-text-color': #FFCF63,

  // ---------- 边框色 ---------- //
  'main-border-color': rgba($--color-black, 0.1),

  // ---------- 滚动条 ---------- //
  'panel-scrollbar-color': rgba($--color-white, 0.1),
);

// 皮肤基础组件配置
$--skin-component-configs: (
  // 主要 tab 头部背景色
  'main-tab-header:bg-color': map.get($--skin-basic-configs, 'sub-bg-color'),
  // 主要 tab 头部字体色
  'main-tab-header:text-color': $--color-white,
  // 主要 tab 头部 hover 字体色
  'main-tab-header--hover:text-color': $--color-white,
  // 主要 tab 头部激活字体色
  'main-tab-header--active:text-color': $--color-white,
  // 主要 tab 头部激活选项线条背景色
  'main-tab-header-line--active:bg-color': $--color-white,
  // 主要 tab 头部阴影开始颜色
  'main-tab-header-shadow-start:color': map.get($--skin-basic-configs, 'sub-bg-color'),
  // 主要 tab 头部阴影结束颜色
  'main-tab-header-shadow-end:color': rgba(62, 62, 78, 0),
  // 主要 tab 头部红点颜色
  'main-tab-header-reminder:color': #f24453,
  // 主要 tab 主体背景色
  'main-tab-body:bg-color': map.get($--skin-basic-configs, 'main-bg-color'),
  // 主要 tab 主体滚动栏颜色
  'main-tab-body:scrollbar-color': rgba($--color-white, 0.6),
  // 主要 tab 主体描述字体色
  'main-tab-body-desc:text-color': rgba(#ffffff, .25),
  // 主要 tab 空菜单图标
  'main-tab-body-empty-icon:bg-image': '../_common/imgs/pws-icon-empty-menu-light.png',

  // normal tab 激活项线条背景色
  'normal-tab-header-line--active:bg-color': map.get($--skin-basic-configs, 'primary-color'),

  // 主题按钮背景色
  'primary-button:bg-color': map.get($--skin-basic-configs, 'primary-color'),
  // 主题按钮字体色
  'primary-button:text-color': $--color-white,
  // 主题按钮 hover 背景色
  'primary-button--hover:bg-color': map.get($--skin-basic-configs, 'primary-light-2'),
  // 主题按钮 hover 字体色
  'primary-button--hover:text-color': $--color-white,
  // 主题按钮 active 背景色
  'primary-button--active:bg-color': map.get($--skin-basic-configs, 'primary-light-1'),
  // 主题按钮 active 字体色
  'primary-button--active:text-color': $--color-white,

  // 侧边栏按钮背景色
  'aside-menu-button:bg-color': rgba($--color-white, 0.1),
  // 侧边栏按钮字体则
  'aside-menu-button:text-color': $--color-white,
  // 侧边栏按钮 hover 背景色
  'aside-menu-button--hover:bg-color': rgba($--color-white, 0.2),
  // 侧边栏按钮 active 背景色
  'aside-menu-button--active:bg-color': rgba($--color-white, 0.15),

  // pc 端直播状态标签颜色
  'pc-live-status-tag:color': (
    'unStart' rgba(#ffffff, .6),
    'waiting' #ffd595,
    'live' #f06e6e,
    'end' rgba(#ffffff, .6),
    'playback' #ffd595,
    'stop' #f06e6e,
  ),
  // mobile 端直播状态标签颜色
  'mobile-live-status-tag:color': (
    'unStart' rgba(#ffffff, .6),
    'waiting' #ffd595,
    'live' #f06e6e,
    'end' rgba(#ffffff, .6),
    'playback' #ffd595,
    'stop' #f06e6e,
  ),
);

// 皮肤公用页面配置
$--skin-page-common-configs: (
  // 聊天室关闭提示图标背景
  'chat-close-tips-icon:bg-image': '../_common/imgs/pws-icon-chat-close-light.png',
  // 聊天室关闭提示图标背景
  'chat-close-tips-icon__empty:bg-image': '../_common/imgs/pws-icon-chat-empty-light.png',
  // 聊天消息关闭提示字体
  'chat-close-tips:text-color': rgba(#ffffff, .25),

  // 聊天消息用户昵称字体色
  'chat-msg-user-nickname:text-color': map.get($--skin-basic-configs, 'main-text-color'),
  // 聊天消息特殊身份昵称字体色
  'chat-msg-user-special-nickname:text-color': map.get($--skin-basic-configs, 'main-highlight-text-color'),
  // 聊天消息用户头衔背景色
  'chat-msg-user-actor:bg-color': #FFDE95,
  // 聊天消息用户头衔字体色
  'chat-msg-user-actor:text-color': #398775,
  // 聊天消息用户设置昵称图标字体色
  'chat-msg-user-set-nick-icon:text-color': map.get($--skin-basic-configs, 'main-highlight-text-color'),
  // 聊天消息时间字体色
  'chat-msg-time:text-color': map.get($--skin-basic-configs, 'describe-text-color'),
  // 聊天提示文案字体色
  'chat-msg-list-tips:text-color': map.get($--skin-basic-configs, 'describe-text-color'),

  // 聊天消息气泡背景色
  'chat-msg-bubble:bg-color': #67AC9C,
  // 聊天消息气泡字体色
  'chat-msg-bubble:text-color': $--color-white,
  // 聊天消息特殊身份气泡背景色
  'chat-msg-bubble-special:bg-color': #E1F4F0,
  // 聊天消息特殊身份气泡字体色
  'chat-msg-bubble-special:text-color': #3A907C,

  // 聊天消息回复内容字体色
  'chat-msg-quote-content:text-color': rgba($--color-white, 0.6),
  // 聊天消息回复内容边框色
  'chat-msg-quote-content:border-color': rgba($--color-white, 0.2),
  // 聊天消息特殊身份回复内容字体色
  'chat-msg-special-quote-content:text-color': rgba(#3A907C, 0.8),
  // 聊天消息特殊身份回复内容字体色
  'chat-msg-special-quote-content:border-color': rgba(#3A907C, 0.2),
  // 聊天回复引用背景色
  'chat-quote-msg:bg-color': map.get($--skin-basic-configs, 'panel-bg-color'),
  // 聊天回复引用字体色
  'chat-quote-msg:text-color': map.get($--skin-basic-configs, 'main-text-color'),

  // 聊天消息翻译成功提示字体色
  'chat-msg-translate-finish:text-color': rgba($--color-white, 0.6),
  // 聊天消息特殊身份翻译成功提示字体色
  'chat-msg-translate-finish-special:text-color': rgba(#3A907C, 0.6),

  // 聊天室更多消息按钮背景色
  'chat-msg-more-button:bg-color': map.get($--skin-basic-configs, 'primary-color'),
  // 聊天室更多消息按钮字体色
  'chat-msg-more-button:text-color': #ffffff,
  // 聊天室更多消息按钮 hover 背景色
  'chat-msg-more-button--hover:bg-color': map.get($--skin-basic-configs, 'primary-color'),
  // 聊天室更多消息按钮 hover 字体色
  'chat-msg-more-button--hover:text-color': #ffffff,

  // 打赏消息字体色
  'chat-reward-msg:text-color': rgba($--color-white, 0.6),
  // 自定义消息字体色
  'chat-customer-msg:text-color': rgba($--color-white, 0.6),
  // 红包领取消息背景色
  'chat-redpaper-receive-msg:bg-color': rgba($--color-black, 0.3),
  // 红包领取消息字体色
  'chat-redpaper-receive-msg:text-color': $--color-white,
  // 系统消息字体色
  'chat-system-msg:text-color': rgba($--color-white, 0.6),
  // 课堂激励消息字体色
  'chat-motivation-like-msg:text-color': rgba($--color-white, 0.6),
  // 课堂激励消息背景色
  'chat-motivation-like-msg:bg': rgba(0, 0, 0, 0.1),

  // 章节字体色
  'chapter-item:text-color': map.get($--skin-basic-configs, 'main-text-color'),
  // 章节高亮字体色
  'chapter-item--active:text-color': map.get($--skin-basic-configs, 'main-highlight-text-color'),
  // 章节边框色
  'chapter-item:border-color': rgba($--color-white, 0.1),

  // 成员列表字体色
  'member-list-item:text-color': map.get($--skin-basic-configs, 'main-text-color'),
  // 成员列表特殊身份字体色
  'member-list-item-special:text-color': map.get($--skin-basic-configs, 'main-highlight-text-color'),

  // 点赞按钮背景图
  'like-button:bg-image': './imgs/pws-zan.png',
  // 点赞数量字体色
  'like-count-number:text-color': map.get($--skin-basic-configs, 'main-text-color'),
  // 点赞数量背景色
  'like-count-number:bg-color': rgba(map.get($--skin-basic-configs, 'main-bg-color'), 0.8),

  // 页面广告背景色
  'page-advert:bg-color': map.get($--skin-basic-configs, 'main-bg-color'),
  // 页面广告字体色
  'page-advert:text-color': map.get($--skin-basic-configs, 'main-text-color'),
  // 页面广告箭头字体色
  'page-advert-arrow:text-color': map.get($--skin-basic-configs, 'main-text-color'),

  // 互动二次入口按钮背景色
  'interactive-entrance-button:bg-color': rgba($--color-white, 0.1),
  // 互动二次入口按钮 hover 背景色
  'interactive-entrance-button--hover:bg-color': rgba($--color-white, 0.2),
  // 互动二次入口按钮字体色
  'interactive-entrance-button:text-color': $--color-white,
  // 互动二次入口箭头字体色
  'interactive-entrance-arrow:text-color': rgba(map.get($--skin-basic-configs, 'main-text-color'), 0.8),

  // 实时字幕
  // 实时字幕-下拉
  'subtitle-select-body:bg-color':  map.get($--skin-basic-configs, 'main-bg-color'),
  'subtitle:text-color': $--color-white,
  'subtitle-item:bg-color': #2e6c5e,
  'subtitle-item:line-color': #FFF,
  'subtitle-item-line:bg-color': map.get($--skin-basic-configs, 'sub-bg-color'),
  'subtitle-item-line:text-color': #FFF,

  // AI 助手答疑
  'pws-ai-assistant-msg-dot:bg-color': #3A907C,
);
